<template>
    <!--书单列表-->
    <div style="height: 100%">
      <headers :heatle="details.title"></headers>

     <div class="dttailsbox">
      <div class="details">
        <img class="detailsimg" :src="URL+details.img" alt="">
        <div>
          <h5>{{details.title}}</h5>
          <p>{{details.bookCount}}节课|{{details.bookCount}}人在听</p>
        </div>
      </div>

      <div>
        <!--<AllLsit></AllLsit>-->
        <div class="book-center">
          <h4>{{details.contentabstract}}</h4>
          <div class="allbook" v-for=" i in detailslist" @click="booklist(i.bookid)">
            <img :src="URL + i.bookimg" alt="">
            <div>
              <h6>{{i.bookname}}</h6>
              <p>{{i.bookrecommend}}</p>
              <span>{{i.videoduration}}</span>
            </div>
          </div>
        </div>
      </div>

     </div>
    </div>
</template>

<script>
  import AllLsit from "@/components/allLsit"
  import headers from "@/components/headers"
    export default {
        name: "singlebook",
      data(){
          return{
            details:[],
            detailslist:[],
          }
      },
      components:{
         AllLsit,
        headers
      },
      mounted(){
        let  date = new Date().getTime() //获取当前时间戳
        var obj ={themeid :this.$route.params.id,channel:'weixin',timestamp:date,token :0}
        var sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
        var url = 'https://testapi.readerday.com/v3/product/theme/detail/0/'+sign +'/' + date +'/'+ this.$route.params.id + '/weixin'

        this.$axios.get(url)
          .then((res)=>{
            this.details=[]
            this.detailslist=[]
            this.details=res.data.data
            this.detailslist=res.data.data.bookList
            console.log(this.details)
          })
      },
      methods:{
        booklist(id){
          this.$router.push({name:'particulars',params:{'id':id}})//调转详情页
        }
      }
    }
</script>

<style scoped>
  .details{
    display: flex;
    padding-top: .4rem;
    background: burlywood;
    text-align: left;
  }
  .dttailsbox{
    height: calc(100% - 56px);
    overflow-y: auto;
  }
  .detailsimg{
    width: .9rem;
    height: .9rem;
    margin-left: .15rem;
    border-radius: .08rem;
  }
  .details>div{
    -webkit-flex: 1;
    margin-left: .1rem;
    color: #666;
    font-size: .12rem;

  }
  .details h5{
    margin-top: .182rem;
    font-weight: 600;
    line-height: .4rem;
    font-size: .14rem;

  }
  .book-center>h4{
    margin-bottom: .15rem;
    margin-top: .2rem;
   font-size: .14rem;
    text-align: left;
    padding-left: .1rem;
  }
  .allbook{
    padding: 0  0.08rem;
    font-size: .12rem;
    text-align: left;
    margin-bottom: .1rem;
  }
  .allbook img{
    height: 1.1rem;
    width: .85rem;
    float: left;
    margin-right: .1rem;
  }
  .allbook h6{
    font-size: .14rem;
    margin-bottom: .05rem;
  }
  .allbook p{
    height: .7rem;
  }
</style>
